
<template>
  <div class="detail app_content">

    <div class="header_body">
      <header-nav leftArrow titelText="过磅单管理详情"></header-nav>
    </div>
    <div class="tile">
      <ul>
        <li class="flex" v-for="item,i in detailsList" :key="i"
        :class="[item.key,{'active-value': activeIndex}]">
          <div class="label flex-align">{{item.label}}</div>
          <div class="value flex-align flex-end">
            <div @click="itemClick(item)" v-if="item.key!='status'" class="ellipsis" :class="[`${item.key}-value`,{'ellipsis' : item.key == detailsList.key}]">{{listData[item.key]||'--' }}</div>
            <div v-if="item.key=='status'">
              <div v-if="listData[item.key]=='0'">正常</div>
              <div v-if="listData[item.key]=='1'">完成</div>
              <div v-if="listData[item.key]=='2'">无效</div>
              <div v-if="listData[item.key]=='3'">作废</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import api from "@/api/index.js";
import { useRoute } from "vue-router";
import headerNav from "@/components/common/headerNav.vue";
import { onMounted, reactive, toRefs } from "vue";
export default {
  name: "Home",
  components: {
    headerNav,
  },
  setup() {
    const route = useRoute();
    const data = reactive({
      activeIndex: false,
      listData: {},
      detailsList: [
        { label: "磅单编号", key: "poundNo" },
        // { label: "订单编号", key: "orderNumber" },
        { label: "订单类型", key: "orderType" },
        { label: "所属单位", key: "goodsCompany" },
        { label: "物料名称", key: "goodsName" },
        { label: "规格", key: "goodsSpecs" },
        { label: "车号", key: "carNo" },
        { label: "毛重", key: "goodsWeight" },
        { label: "皮重", key: "goodsTare" },
        { label: "净重", key: "goodsSuttle" },
        { label: "扣杂", key: "coverVaried" },
        // { label: "单位", key: "goodsUnit" },
        { label: "状态", key: "status" },
        { label: "出场时间", key: "passTime1" },
        { label: "司磅员", key: "handler" },
        { label: "备注", key: "remark" },
      ],
    });
    console.log(route.query, 123);
    const methods = reactive({
            itemClick(item) {
        let { key } = item;
        if (key == "remark") {
          data.activeIndex = !data.activeIndex;
        }
      },
      onSearch() {},
      async findPoundById() {
        console.log(api);
        let id = route.query.id;
        let res = await api.findPoundById(id);
        data.listData = res.data;
        console.log(id);
        console.log(data.listData);
      },
    });

    onMounted(() => {
      methods.findPoundById();
    });

    return {
      route,
      ...toRefs(data),
      ...methods,
    };
  },
};
</script>

<style lang="less" scoped>
.detail {
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  background: #f8fafd;
  .tile {
    flex: 1;
    margin-bottom: 2vw;
    ul {
      overflow-y: auto;
      li {
        font-size: 3.5vw;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        height: 9vw;
        .label {
          height: 100%;
          width: 22%;
          color: #9ea5bb;
        }
        .value {
          width: 78%;
          height: 100%;
          text-align: right;
          color: #5a6073;
        }
      }
      li.remark.active-value {
        max-height: 15vw;
        .label {
          align-items: flex-start;
        }
        .value {
          align-items: flex-start;
          .remark-value {
            width: 100%;
            word-break: break-all;
            white-space: pre-wrap;
            overflow: initial;
            text-overflow: initial;
          }
        }
      }
    }
  }
  .ternon {
    .van-button {
      margin: 0 !important;
    }
  }
}
.ellipsis {
  overflow: hidden; /*超出的部分隐藏起来。*/
  white-space: nowrap; /*不让文本换行,在一行显示*/
  text-overflow: ellipsis; /*超出显示...*/
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
}
.flex-align {
  display: flex;
  align-items: center;
}
.flex-center {
  display: flex;
  justify-content: center;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
</style>
